<template>
    <el-drawer :model-value="visible" :title="title" @close="closeDrawer" size="600px">
        <el-form ref="formRef" :model="detail" :rules="rules" label-width="120px">
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-form-item prop="configKey" label="ConfigKey">
                        <el-input v-model.trim="detail.configKey" type="text" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item prop="configType" label="ConfigType">
                        <el-input-number v-model="detail.configType" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item prop="configValue" label="ConfigValue">
                        <el-input-number v-model="detail.configValue" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button @click="save" type="primary" :icon="loading ? 'el-icon-loading' : 'el-icon-document'" :disabled="loading">保存</el-button>
                <el-button @click="closeDrawer" icon="el-icon-close">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<script lang="ts">
import { ElNotification } from 'element-plus';
import { AxiosRequestConfig } from 'axios'
import { defineComponent, inject, reactive, ref, toRaw, toRefs, watch } from 'vue'
import { DataOperationType } from "@/constants"
import { copyProperties } from '@/utils/object-utils'
import { request } from '@/utils/request-utils'

const rules = {
    configKey: [{ required: true, message: 'ConfigKey不能为空', trigger: 'blur' }],
    configType: [{ type: 'integer', required: true, message: 'ConfigType不能为空', trigger: 'blur' }],
    configValue: [{ type: 'integer', required: true, message: 'ConfigValue不能为空', trigger: 'blur' }],
}

export default defineComponent({
    emits: ['save'],
    props: {
        pk: {
            type: [Object, Map],
            required: false,
            default: () => undefined
        },
        operateType: {
            type: Number,
            default: () => DataOperationType.default
        },
        visible: {
            type: Boolean,
            default: () => false
        },
    },
    setup(props, { emit }) {
        const { pk, operateType, visible } = toRefs(props)
        const title = ref<string>('')
        const loading = ref<boolean>(false)
        const formRef = ref()
        const detail = reactive<any>({
            configKey: '',
            configType: undefined,
            configValue: undefined,
        })
        const resetForm = () => {
            formRef.value.resetFields()
            formRef.value.clearValidate()
        }
        const closeSaveDrawer = inject<(newVal: boolean) => void>('closeSaveDrawer')
        const closeDrawer = () => {
            resetForm()
            if (closeSaveDrawer) closeSaveDrawer(false)
        }

        const getDetail = (newVal: boolean) => {
            if (!newVal) return
            if (operateType.value === DataOperationType.default) return
            if (operateType.value === DataOperationType.create) {
                title.value = '添加多主键测试'
            } else {
                if (operateType.value === DataOperationType.copy)
                    title.value = '复制多主键测试'
                else if (operateType.value === DataOperationType.update)
                    title.value = '编辑多主键测试'

                request({ url: '/api-multi-config/detail', method: 'GET', params: pk.value }).then(response => {
                    copyProperties(response, detail)
                })
            }
        }

        watch(visible, getDetail)

        const save = () => {
            formRef.value.validate((valid: boolean) => {
                if (valid) {
                    loading.value = true;
                    const requestConfig: AxiosRequestConfig = operateType.value === DataOperationType.update
                        ? { url: '/api-multi-config/update', method: "PATCH", data: toRaw(detail), params: pk.value }
                        : { url: '/api-multi-config/add', method: "POST", data: toRaw(detail) }
                    request(requestConfig).then(response => {
                        ElNotification({
                            type: 'success',
                            message: "保存成功"
                        })
                        closeDrawer()
                        emit("save", response)
                    }).finally(() => {
                        loading.value = false
                    })
                } else {
                    ElNotification({
                        type: 'error',
                        message: "参数验证失败"
                    })
                    return false;
                }
            });
        }

        return {
            title, detail,
            formRef,
            rules,
            loading,
            save,
            closeDrawer
        }
    }
})
</script>

<style scoped>
</style>